<template>
  <div>
    <div class="pageCard">
      <a-form layout="inline" :model="formSearch">
        <a-form-item>
          <a-input
            v-model:value="formSearch.name"
            placeholder="请输入角色名称"
          >
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="getSearch">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button @click="toresetFields">重置</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div style="background: #fff">
      <a-table
        style="padding: 0 20px"
        :pagination="pagination"
        :columns="columns"
        :rowKey="(record) => record.id"
        :data-source="list"
      >
        <template #name="{ text }">
          <a>{{ text }}</a>
        </template>
        
         <template #createTime="{ record }">
           {{(record.modifyTime ? record.modifyTime : record.createTime)}}
         </template>
         
           <template #isFreeze="{ record }">
            <a-switch @change="handleStatus(record)" :checkedValue="0" :unCheckedValue="1" v-model:checked="record.isFreeze" />
         </template>
        <template #operation="{ record }">
          <div style="display: flex; align-items: center">
            <a-button
             type='link'
             :disabled="userInfo.type == 'hospital' && !record.hospitalBaseId ? true : false"
              @click="editRole(record)"
            >
              分配菜单
            </a-button>
            <a-button
             :disabled="userInfo.type == 'hospital' && !record.hospitalBaseId ? true : false"
              type='link'
              @click="editHandle(record)"
            >
              编辑
            </a-button>
             <a-button
                type='link'
             
              @click="lookHandle(record)"
            >
              查看
            </a-button>
            <a-button 
              type='link'
              :disabled="userInfo.type == 'hospital' && !record.hospitalBaseId ? true : false"
            @click="delHandle(record)">
              删除
            </a-button>
          </div>
        </template>
        <template #title>
          <div class="ANTTable_header">
            <div style="font-weight: bold">角色列表</div>
            <a-button type="primary" @click="addHandle">创建角色</a-button>
          </div>
        </template>
      </a-table>
    </div>

    <a-modal
      width="40%"
      v-model:visible="visible"
      :title="handleTitle"
      @ok="handleOk"
      @cancel="handleCancle"
      ok-text="确认"
      cancel-text="取消"
    >
      <child
        v-if="visible"
        :handleType="handleType"
        :handleRow="handleRow.data"
        ref="child"
        @finish="finishHandle"
      ></child>
    </a-modal>

    <a-modal
      width="30%"
      v-model:visible="rolevisible"
      title="菜单分配"
      ok-text="确认"
      cancel-text="取消"
      @ok="rolehandleOk"
      @cancle="rolevisible = false"
    >
      <setMenus
        v-if="rolevisible"
        :handleRow="rolehandleRow.data"
        ref="setMenus"
        @finish="rolefinishHandle"
      ></setMenus>
    </a-modal>
  </div>
</template>
<script>
import child from "./components/child.vue";
import setMenus from "./components/setMenus.vue";
import { createVNode, onMounted, reactive, ref, toRefs, watch } from "vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { Form } from "ant-design-vue";
import { Modal, message } from "ant-design-vue";
import { getUserInfo } from "@/utils/auth";
import * as hospitalApi from "@/api/hospital";
// 表格Column
const columns = [
  {
    title: "角色名称",
    dataIndex: "name",
  },
  {
    title: "角色编码",
    dataIndex: "code",
  },
   {
    title: "角色描述",
    dataIndex: "remark",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    slots: { customRender: "createTime" },
  },
  {
    title: "状态",
    dataIndex: "isFreeze",
     slots: { customRender: "isFreeze" },
  },

  {
    title: "操作",
    dataIndex: "operation",
    width: 220,
    slots: { customRender: "operation" },
  },
];
const useForm = Form.useForm;
import { roleList, roleDelete,roleSaveOrUpdate} from "@/api/setting1.js";
export default {
  components: {
    child,
    setMenus,
    ExclamationCircleOutlined
  },
  setup() {
    const formSearch = reactive({
      name: "",
    });

    const tableData = reactive({ list: [], total: 0 });
    const { resetFields } = useForm(formSearch);
     const userInfo = ref(getUserInfo() ? JSON.parse(getUserInfo()) : {})
    const pageSize = ref(10);
    const pageIndex = ref(1);
    const pagination = reactive({
      total: 0,
      pageSize: pageSize.value, // 默认每页显示数量
      showSizeChanger: true, // 显示可改变每页数量
      pageSizeOptions: ["10", "20", "30", "40"], // 每页数量选项
      showTotal: (total) => `总数 ${total}条数据`, // 显示总数
      onChange: (page, size) => {
        onPageChange(page, size);
      }, // 改变每页数量时更新显示
      onShowSizeChange: (current, size) => {
        onSizeChange(current, size);
      },
    });
    // 查询
    const getSearch = ()=>{
      pageIndex.value = 1;
      pagination.current = 1
      handleGetDataList();

    }
    // 分页
    const onSizeChange = (current, size) => {
      pageIndex.value = 1;
      pageSize.value = size;
      handleGetDataList();
    };
    const onPageChange = (current, size) => {
      pageIndex.value = current;
      handleGetDataList();
    };
    // 启用关闭
    const  handleStatus = (item)=>{
      Modal.confirm({
        title:   `${item.isFreeze == 1 ? "是否禁用该角色" : "是否启用该角色"}`,
        icon: createVNode(ExclamationCircleOutlined),
        content: '',
        okText: '确定',
        cancelText: '取消',

        onOk() {
          roleSaveOrUpdate({
            id: item.id,
            isFreeze: item.isFreeze,
          }).then((res) => {
            if (res && res.success) {
              message.success( `${
                  item.isFreeze == 1 ? "禁用该角色成功" : "启用该角色成功"
                }`)
             
            getSearch()
            }
          });
        },
        onCancel() {
         message.info('已取消')
          getSearch()
        },

      });
    }
    // 获取表格
    const handleGetDataList = () => {
      tableData.list = []
      let params = {
        pageIndex: pageIndex.value,
        pageSize: pageSize.value,
        name: formSearch.name,
      };
      roleList(params).then((res) => {
        if (res && res.success) {
          tableData.list = res.data;
          pagination.total = res.total;
        }
      });
    };
    const handleTableChange = ()=>{
      console.log('cahnge')
    }
    // 重置表格
    const toresetFields = () => {
      resetFields();
      getSearch();
    };
    // 监听表格
    watch(
      () => formSearch,
      (curAge, preAge) => {
        getSearch();
      },
      { deep: true }
    );

    //  新增功能
    const visible = ref(false);
    const handleType = ref("add");
    const handleTitle = ref("新增角色");
    const handleRow = reactive({ data: {} });
    const addHandle = () => {
      visible.value = true;
      handleType.value = "add";
      handleTitle.value = "新增角色";
    };
    const rolevisible = ref(false);
    const rolehandleRow = reactive({ data: {} });
    // 角色分配
    const editRole = (data) => {
      rolevisible.value = true;
      rolehandleRow.data = data;
    };
    const editHandle = (data) => {
      visible.value = true;
      handleType.value = "edit";
      handleTitle.value = "编辑角色";
      handleRow.data = data;
    };
    const lookHandle = (data)=>{
      visible.value = true;
      handleType.value = "look";
      handleTitle.value = "查看角色";
      handleRow.data = data;
    }
    // 删除
    const delHandle = (data)=>{
      Modal.confirm({
        title: () => '提示',
        icon: () => createVNode(ExclamationCircleOutlined),
        content: () => createVNode('div', { style: 'color:red;' }, '确认删除该角色'),
        okText:'确定',
        cancelText:'取消',
        onOk() {
            roleDelete(data.id).then((res) => {
            if (res && res.success) {
              message.success('删除成功')
              getSearch()
            }
          });
        },
        onCancel() {
          console.log('Cancel');
        },
        class: 'test',
      });
    }

    // 完成操作
    const finishHandle = () => {
      visible.value = false;
      pageIndex.value = 1;
      handleGetDataList();
    };

    const child = ref(null);
    const handleOk = () => {
      child.value.handleSave();
    };
    const setMenus = ref(null);
    const rolehandleOk = () => {
      console.log(1234);
      console.log(setMenus.value);
      setMenus.value.handleSave();
    };
    const rolefinishHandle = () => {
      rolevisible.value = false;
      pageIndex.value = 1;
      handleGetDataList();
    };
    const handleCancle = () => {
      child.value.resetForm();
    };
    onMounted(() => {
      handleGetDataList();
    });
    return {
      userInfo,
      child, //子组件
      formSearch,
      toresetFields,

      columns,
      pagination,
      ...toRefs(tableData),
      handleGetDataList,
      handleTableChange,
      getSearch,
      onPageChange,
      onSizeChange,

      visible,
      addHandle,
      editHandle,
      lookHandle,
      handleTitle,
      handleRow,
      handleType,
      handleOk,
      handleCancle,
      finishHandle,

      rolevisible,
      rolehandleRow,
      editRole,
      rolehandleOk,
      rolefinishHandle,
      setMenus, //子组件
      delHandle,

      handleStatus
    };
  },
};
</script>